<HTML>
    <HEAD>
      <TITLE> 水滴 </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <style>
        body {
          overflow: hidden;
          background: black;
        }
  </style>
    </HEAD>
   
    <BODY>
      <canvas id="canvas-club"></canvas>
      <script>
        var c = document.getElementById("canvas-club");
        var ctx = c.getContext("2d");
        var w = c.width = window.innerWidth;
        var h = c.height = window.innerHeight;
        var clearColor = 'rgba(0, 0, 0, .1)';
        var max = 30;
        var drops = [];
   
        function random(min, max) {
          return Math.random() * (max - min) + min;
        }
   
        function O() {}
        O.prototype = {
          init: function() {
            this.x = random(0, w);
            this.y = 0;
            this.color = 'hsl(180, 100%, 50%)';
            this.w = 2;
            this.h = 1;
            this.vy = random(4, 5);
            this.vw = 3;
            this.vh = 1;
            this.size = 2;
            this.hit = random(h * .8, h * .9);
            this.a = 1;
            this.va = .96;
          },
          draw: function() {
            if (this.y > this.hit) {
              ctx.beginPath();
              ctx.moveTo(this.x, this.y - this.h / 2);
   
              ctx.bezierCurveTo(
                this.x + this.w / 2, this.y - this.h / 2,
                this.x + this.w / 2, this.y + this.h / 2,
                this.x, this.y + this.h / 2);
   
              ctx.bezierCurveTo(
                this.x - this.w / 2, this.y + this.h / 2,
                this.x - this.w / 2, this.y - this.h / 2,
                this.x, this.y - this.h / 2);
   
              ctx.strokeStyle = 'hsla(180, 100%, 50%, ' + this.a + ')';
              ctx.stroke();
              ctx.closePath();
   
            } else {
              ctx.fillStyle = this.color;
              ctx.fillRect(this.x, this.y, this.size, this.size * 5);
            }
            this.update();
          },
          update: function() {
            if (this.y < this.hit) {
              this.y += this.vy;
            } else {
              if (this.a > .03) {
                this.w += this.vw;
                this.h += this.vh;
                if (this.w > 100) {
                  this.a *= this.va;
                  this.vw *= .98;
                  this.vh *= .98;
                }
              } else {
                this.init();
              }
            }
   
          }
        }
   
        function resize() {
          w = c.width = window.innerWidth;
          h = c.height = window.innerHeight;
        }
   
        function setup() {
          for (var i = 0; i < max; i++) {
            (function(j) {
              setTimeout(function() {
                var o = new O();
                o.init();
                drops.push(o);
              }, j * 200)
            }(i));
          }
        }
   
        function anim() {
          ctx.fillStyle = clearColor;
          ctx.fillRect(0, 0, w, h);
          for (var i in drops) {
            drops[i].draw();
          }
          requestAnimationFrame(anim);
        }
        window.addEventListener("resize", resize);
   
        setup();
        anim();
  </script>
    </BODY>
  </HTML>